<!DOCTYPE html>
<html>
<head>
    <title>编辑游记</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userTravels.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <link rel="stylesheet" href="/js/eleditor/layout/base.css"/>
    <!--富文本插件-->
    <script src="/js/eleditor/Eleditor.min.js"></script>
    <script src="/js/eleditor/webuploader.min.js"></script>
    <!--移动端弹-->
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <!--表单提交-->
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <!--date97时间插件-->
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script src="/js/plugins/My97DatePicker/lang/zh-cn.js"></script>
    <script src="/js/common.js"></script>

</head>

<body>
<form id="imgForm" action="/images" method="post" enctype="multipart/form-data">
    <input type="file" name="pic" style="display: none;" accept="image/*"/>
</form>

<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:window.history.go(-1);">
                <span><i class="fa fa-times"></i></span>
            </a>
        </div>
        <div class="col-5"></div>
        <div class="col" style="text-align: right;">
            <i class="fa fa-floppy-o fg-fw" id="save"><span>保存</span></i>
            <i class="fa fa-check" id="release"><span>发布</span></i>
        </div>
    </div>
</div>

<div class="travels form-group">
    <div class="cover">
        <img id="coverUrl" width="100%" height="200px" render-src="coverUrl"/>
        <button type="button" class="btn" id="changeBtn">
            <i class="fa fa-pencil-square-o"></i>
            <small>更换封面</small>
        </button>
    </div>

    <div class="title">
        <input class="form-control" id="title" placeholder="请输入标题" render-value="title"/>
    </div>

    <h6 href="javascript:">点击文章内容即可编辑</h6>

    <!--富文本编辑器-->
    <div id="contentEditor" render-html="travelContent.content"></div>

    <hr/>
    <div class="container">
        <form id="detailForm" method="post">
            <input type="hidden" name="id"/>
            <label>出行时间:</label>
            <input type="text" name="travelTime" class="form-control" render-value="travelTime"
                   onclick="WdatePicker({maxDate:new Date(),readOnly:true})">
            <label>出行天数:</label>
            <input type="number" name="days" class="form-control" render-value="days" >
            <label>参与人物:</label>
            <select class="c-select form-control" name="person" render-value="person">
                <option value="1">一个人的旅行</option>
                <option value="2">和父母</option>
                <option value="3">和朋友</option>
                <option value="4">和同事</option>
                <option value="5">和爱人</option>
                <option value="6">和驴友</option>
            </select>
            <label>人均费用:</label>
            <input type="number" name="perExpends" class="form-control" render-value="perExpends">

            <label>旅游地点:</label>
            <select class="form-control" name="place.id" render-value="place.id">
                <option value="1">广州</option>
            </select>

            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" name="isPublic" render-attr="checked=isPublic">是否公开
                </label>
            </div>
        </form>
    </div>
    <hr/>
</div>
<script>
    $(function () {
        // 页面加载完毕发送请求查询所有的区域
        $.get("/regions", function (data) {
            // 先清空select的内容
            $("#detailForm select[name='place.id']").html('');
            // 遍历所有data, 将每个区域值放置在select中
            $.each(data, function (index, item) {
                var option = $("<option></option>").html(item.name).val(item.id);
                // 将每个区域拼接到下拉框中
                option.appendTo($("#detailForm select[name='place.id']"));
            })
        });


        // 如果是编辑操作, 需要拿到游记的对应的id---从地址栏获取id
        var id = getParams().id;

        if (id){
            // 编辑操作
            // 发送ajax请求获取日记的内容用于回显
            $.get("/travels/"+id, function (data) {
                // 先设置表单中的隐藏域id--只有在查询得到游记的数据后再设置隐藏域 id 的值
                $("#detailForm input[name='id']").val(data.id);
                // 进行页面渲染
                $(".travels").renderValues(data);
            });
        }

        // 更换封面
        // 给更换封面按钮绑定点击事件
        $("#changeBtn").click(function () {
            // 弹出文本选择框
            $("#imgForm input[name='pic']").click();
        });

        // 图片控件内容改变事件
        $("#imgForm input[name='pic']").change(function () {
            if ($("#imgForm input[name='pic']").val()) {
                // 发送ajax请求到服务器-图片上传
                $("#imgForm").ajaxSubmit(function (data) {
                    if (data.status == 1) {
                        $("#coverUrl").attr("src", data.url);
                    } else {
                        $(document).dialog({
                            titleText: '温馨提示',
                            content: data.msg
                        });
                    }
                });
            }
        });

        // 添加富文本编辑器
        var artEditor = new Eleditor({
            el: "#contentEditor",
            // 配置文件上传对象
            upload: {
                // 后台接收地址
                server: "/images",
                // 设置上传图片的名称--需要和后台定义的接收参数名一致
                formName: "pic",
                // 设置最大上传图片4M
                fileSizeLimit: 4
            }
        });

        // 设置全局状态: state -- 0:保存   1:发布
        var state;

        // 获取当前用户--用于获取id设置访问地址中的id
        var user = sessionStorage.getItem("user");
        // 设置表单提交的action
        $("#detailForm").attr("action", "/users/"+user.id+"/travels");

        // 保存按钮点击事件
        $("#save").click(function () {
            state = 0;
            // 表单提交
            $("#detailForm").submit();

        });

        // 发布按钮点击事件
        $("#release").click(function () {
            state = 1;
            // 表单提交
            $("#detailForm").submit();
        });
        
        // 异步提交表单
        $("#detailForm").ajaxForm({
            // 进行表单提交前预处理
            // arr: 表单提交的数组参数
            beforeSubmit:function (arr) {
                // 给表单提交参数数组中添加额外需要提交的参数
                arr.push({name:"coverUrl",value:$("#coverUrl").attr("src")});// 封面url
                arr.push({name:"title", value:$("#title").val()});//标题
                arr.push({name:"travelContent.content",value:artEditor.getContent()});// 富文本内容
                arr.push({name:"state", value:state});// 游记状态(保存 / 待发布)
                if (id){
                    // 有id是更新, 所以需要添加一个_method属性, 让后台能判断是put请求
                    arr.push({name:"_method", value:"PUT"});

                }

                return true;// true: 表示提交能提交表单  false: 不能提交表单
            },
            // 表单提交成功的回调函数
            success:function (data) {
                if (data.success){
                    // 如果保存游记成功, 则直接跳转到我的游记页面
                    window.location.href = "/mine/travels.html";
                } else {
                    // 如果不成功, 则弹框提示服务器繁忙, 请稍后再试
                    $(document).dialog({
                        titleText: '温馨提示',
                        position:"bottom",
                        content: data.msg
                    });
                }
            }
        })
    });
</script>

</body>
</html>